<template>
  <div>
    <div>孙子得到爷爷的钱，{{ money }}</div>
    <div>孙子得到爷爷的车，{{ car }}</div>
    <div>
      <button @click="sendMoney">给爷爷钱</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue'

// 由于TS无法实现跨页面，进行类型推断，所以只能每次使用inject都写上默认值，然TS知道每个变量与对象属性值与方法，的类型。进行类型推断
let { money, addGrandFaMoney } = inject('moneyContext', { money: 0, addGrandFaMoney: (param: number) => {} })
let car = inject('carContext', { name: "", price: 0 })

function sendMoney() {
  addGrandFaMoney(100)
}
</script>

<style lang="scss" scoped>

</style>